<template>
  <v-app class="app">
    <div class="wrapper-inner app-layout">
      <div class="market-layout" v-if="initMarket">
        <div>
          <Search />
        </div>
        <div>
          <DataList @onClick="clickDetail" />
        </div>
      </div>
      <div v-else>
        <div class="crumb-view">
          <div class="crumb-item d-flex">
            <div class="router-link-active">Auction Market</div>
            <span class="crumb-space">&gt;</span>
            <span>JOJO Engineer</span>
          </div>
        </div>
        <BuyNft />
      </div>
    </div>
  </v-app>
</template>
<script>
// import Footer from "@/common/components/Footer.vue";
import Search from "./component/search";
import DataList from "./component/dataList";
import BuyNft from "@/components/buyNft";

export default {
  name: "nftMarket",
  components: {
    Search,
    DataList,
    BuyNft,
  },
  data: () => ({
    initMarket: true,
  }),

  watch: {
    group() {},
  },
  created() {},
  mounted() {},
  methods: {
    clickDetail() {
      this.initMarket = false;
    },
  },
};
</script>
<style scoped lang="scss">
@import "./../../common/styles/common.scss";

.app {
  min-height: 100vh;
  background: #f7f7f7;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;

  .wrapper-inner {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
  }
  .app-layout {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    @media screen and (max-width: 1519px) {
      width: 1092px;
    }
    @media screen and (max-width: 1439px) {
      width: 932px;
    }
    @media screen and (max-width: 1279px) {
      width: calc(100% - 60px);
    }
    @media screen and (max-width: 960px) {
      width: 100vw;
      overflow: hidden;
      padding: 0 15px;
    }
  }
}
.market-layout {
  padding: 24px 0;
  @media screen and (min-width: 300px) and (max-width: 960px) {
    padding: 15px 0;
  }
}
.crumb-view {
  padding: 32px 0;
  .crumb-item {
    color: #431216;
    font-size: 15px;
  }
  .crumb-space {
    margin: 0 8px;
  }
}
</style>